import React, { memo } from 'react'
import { shallowEqual, useSelector } from 'react-redux'
import { ArtistListWrapper,NavWrapper ,ContentWrapper} from './style'
import { formatImg } from '@/utils/format'
import LetterList from '../letter-list'
import useShowArtistDetail from '@/hooks/useShowArtistDetail'
export default memo(function ArtistList() {
  const { artistList ,currentTitle} = useSelector(state => ({
    artistList: state.getIn(['artist', 'artistList']),
    currentTitle:state.getIn(['artist','currentTitle'])
  }), shallowEqual)
  const goToArtistDetail = useShowArtistDetail()
  const artists = artistList || []
  
  return (
    <ArtistListWrapper>
      <NavWrapper>
        <span>{currentTitle}</span>
      </NavWrapper>
      {
        currentTitle === '推荐歌手' || currentTitle==="入驻歌手" ? null : <LetterList/>
      }
      <ContentWrapper>
      {
        artists.map(item => {
          return (
            <div key={item.id} className='item' onClick={e => goToArtistDetail(item.id)}>
              <div className="mask sprite_covor"></div>
              <img src={formatImg(item.img1v1Url, 130)} alt="" />
              <div className="name">
                {item.name}
                <i className='sprite_icon2 icon'></i>
              </div>
              
            </div>
          )
        })
        }
      </ContentWrapper>
    </ArtistListWrapper>
  )
})
